/**
 * Created by lipeng on 2019/5/5.
 */

new Vue({
  el: '#app',
  data: {
    msg: "Hello Word",
    sysList: [
      {
        active: 1,
        icon:'icon-liebian',
        title: "全网裂变",
        desc: "线上门店快速裂变</br>多门店一体化管理"
      },
      {
        active: 0,
        icon:'icon-fenxiao1',
        title: "分销返佣",
        desc: "多层级裂变分销，三级返佣金</br>让用户成为推客"
      },
      {
        active: 0,
        icon:'icon-zhineng',
        title: "层级智能锁定",
        desc: "多种方式智能锁定推客上级或</br>下级代理的链路关系"
      },
      {
        active: 0,
        icon:'icon-tubiao6',
        title: "低成本获客",
        desc: "电商社交化，把硬广投入转化</br>为销售提成，低成本获客"
      },
    ],
    weshopList:[
      {
        active:0,
        icon:"icon-wanmeijianrong",
        title:'移动PC平台跨越',
        desc:'助您跨越传统互联网和移动互联网的电商应用。全面进入微信端，迅速抢占市场先机，打造双平台盈利'
      },
      {
        active:0,
        icon:"icon-wanmeijianrong",
        title:'便捷下单付款',
        desc:'九鸟多商户微商城借助微信自身优势，随时随地微信下单、支付，让客户消费更便捷、更时尚。促成每一笔订单的更快到账'
      },
      {
        active:0,
        icon:"icon-wanmeijianrong",
        title:'海量用户 随时购物',
        desc:'微信11亿用户，每一个用户都可能关注您的微信商城，TPshop微商城打破时间、空间限制，让您的客户随时随地购物'
      },
      {
        active:0,
        icon:"icon-wanmeijianrong",
        title:'移动PC平台跨越',
        desc:'助您跨越传统互联网和移动互联网的电商应用。全面进入微信端，迅速抢占市场先机，打造双平台盈利'
      },
      {
        active:0,
        icon:"icon-wanmeijianrong",
        title:'便捷下单付款',
        desc:'九鸟多商户微商城借助微信自身优势，随时随地微信下单、支付，让客户消费更便捷、更时尚。促成每一笔订单的更快到账'
      },
      {
        active:0,
        icon:"icon-wanmeijianrong",
        title:'海量用户 随时购物',
        desc:'微信11亿用户，每一个用户都可能关注您的微信商城，TPshop微商城打破时间、空间限制，让您的客户随时随地购物'
      },
    ],
    dispUrl:'',
    dispList:[
      {
        active:1,
        icon:'icon-yizhanguanli',
        name:'首页',
        imgUrl:'',
      },
      {
        active:0,
        icon:'icon-yizhanguanli',
        name:'分类',
        imgUrl:'',
      },
      {
        active:0,
        icon:'icon-yizhanguanli',
        name:'分类',
        imgUrl:'',
      },
      {
        active:0,
        icon:'icon-yizhanguanli',
        name:'分类',
        imgUrl:'',
      },
      {
        active:0,
        icon:'icon-yizhanguanli',
        name:'分类',
        imgUrl:'',
      },
    ]
  },
  created: function () {

  },
  mounted: function () {
    this.initSwiper();
  },
  methods: {
    systemOver: function (index) {
      for (var i = 0; i < this.sysList.length; i++) {
        this.sysList[i].active = 0;
      }
      this.sysList[index].active = 1;
    },
    dispOver:function (index) {
      for (var i = 0; i < this.dispList.length; i++) {
        this.dispList[i].active = 0;
      }
      this.dispList[index].active = 1;
      // this.devData = this.sysList[index]
    },
    initSwiper: function () {
      var self = this;
      var shopAdv = new Swiper('#shopAdv', {
        slidesPerView: 3,
        spaceBetween: 10,
        loop: true,
        // init: false,
        pagination: {
          el: '.swiper-pagination',
          clickable: true,
          renderBullet: function (index, className) {
            return '<span class="' + className + '">' + (index + 1) + '</span>';
          },
        },
        breakpoints: {
          1024: {
            slidesPerView: 3,
            spaceBetween: 10,
          },
          768: {
            slidesPerView: 1,
            spaceBetween: 0,
          },
        },
        on: {
          slideChangeTransitionEnd: function () {
            for (var i=0;i<self.weshopList.length;i++){
              self.weshopList[i].active = 0;
            }
            self.weshopList[this.realIndex].active = 1;
          },
        },
      });

      var shopProgress = new Swiper('#shopProgress', {
        effect: 'coverflow',
        grabCursor: true,
        centeredSlides: true,
        slidesPerView: 'auto',
        loop:true,
        coverflowEffect: {
          rotate: 50,
          stretch: 0,
          depth: 100,
          modifier: 1,
          slideShadows : true,
        },
        pagination: {
          el: '.swiper-pagination',
          clickable: true,
          renderBullet: function (index, className) {
            return '<span class="' + className + '">' + (index + 1) + '</span>';
          },
        },
      });
    },

  }
});